import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';

const Right1 = () => {
    const chartRef = useRef(null);
    const echartsRef = useRef(null);
    const [data, setData] = useState([]);
    const dataLength = 200;
    const warningValue = 40;

    useEffect(() => {
        // 初始化数据
        initChartData();

        // 初始化图表
        echartsRef.current = echarts.init(chartRef.current);
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
            },
            xAxis: {
                type: 'time',
                boundaryGap: false,
                axisLabel: {
                    formatter: '{HH}:{mm}:{ss}',
                },
            },
            yAxis: {
                type: 'value',
                min: 15,
                max: 50,
                axisLabel: {
                    formatter: '{value} °C',
                },
                splitLine: {
                    show: true,
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true,
                },
            },
            series: [
                {
                    name: '大棚温度',
                    type: 'line',
                    data: [],
                    smooth: true,
                    itemStyle: {
                        color: '#ff7f0e',
                    },
                },
                {
                    name: '室外温度',
                    type: 'line',
                    data: [],
                    smooth: true,
                    itemStyle: {
                        color: '#2ca02c',
                    },
                },
            ],
            visualMap: {
                show: false,
                pieces: [
                    {
                        gt: warningValue,
                        lte: 50,
                        color: '#f5222d',
                    },
                ],
            },
            markLine: {
                data: [
                    {
                        yAxis: warningValue,
                        label: {
                            formatter: '预警温度：40摄氏度',
                            position: 'start',
                            fontSize: 12,
                            fontWeight: 'bold',
                            color: '#f5222d',
                        },
                        lineStyle: {
                            color: '#f5222d',
                        },
                    },
                ],
            },
        };

        echartsRef.current.setOption(option);

        // 更新图表
        const updateChart = () => {
            const now = new Date().getTime();
            const temperature1 = Math.floor(Math.random() * 3) + 26;
            const temperature2 = Math.floor(Math.random() * 3) + 23;

            if (data.length >= dataLength) {
                data.shift();
                data.shift();
            }

            const newData = [...data];
            newData.push({ time: now, temperature: temperature1, type: '大棚温度' });
            newData.push({ time: now, temperature: temperature2, type: '室外温度' });
            setData(newData);

            const chartData1 = newData.filter(item => item.type === '大棚温度').map(item => [item.time, item.temperature]);
            const chartData2 = newData.filter(item => item.type === '室外温度').map(item => [item.time, item.temperature]);

            if (echartsRef.current) {
                echartsRef.current.setOption({
                    series: [
                        { data: chartData1 },
                        { data: chartData2 },
                    ],
                });
            }
        };

        // 启动定时器
        const interval = setInterval(updateChart, 5000);

        return () => clearInterval(interval);
    }, [data]);

    const initChartData = () => {
        const now = new Date().getTime();
        const initialTemperature1 = Math.floor(Math.random() * 3) + 26;
        const initialTemperature2 = Math.floor(Math.random() * 3) + 23;

        setData([
            { time: now, temperature: initialTemperature1, type: '大棚温度' },
            { time: now, temperature: initialTemperature2, type: '室外温度' },
        ]);
    };

    return (
        <div>
            <div id="c1" ref={chartRef} style={{ width: '100%', height: '170px' }}></div>
        </div>
    );
};

export default Right1;
